type TCss = string | (string | undefined)[] | { [key: string]: boolean }

export const css = (css: string, extraClass?: TCss) => {
  if (!extraClass) return css

  if (typeof extraClass === 'string') {
    css = `${css} ${extraClass}`
  } else if (Array.isArray(extraClass)) {
    extraClass.forEach(c => {
      if (!c) return
      css += ` ${c}`
    })
  } else {
    Object.keys(extraClass).forEach(c => {
      if (!extraClass[c]) return
      css += ` ${c}`
    })
  }

  return css
}

export const addCss = (dom: HTMLElement, extraClass: string) => {
  if (!dom || !extraClass) return

  const cls = dom.className

  if (!cls.includes(extraClass)) {
    dom.className = `${dom.className} ${extraClass}`
  }
}

export const removeCss = (dom: HTMLElement, extraClass: string) => {
  if (!dom || !extraClass) return

  const cls = dom.className

  if (cls.includes(extraClass)) {
    dom.className = cls.replace(extraClass, '')
  }
}
